<template>
  <div>
    <div class="progress-bar">
      <div
        v-for="(step, index) in steps"
        :key="index"
        :class="['step', { active: currentStep === index, completed: index < currentStep }]"
      >
        {{ step }}
      </div>
    </div>
    <div>
      <component :is="currentComponent" @next="nextStep" @prev="prevStep" />
    </div>
  </div>
</template>

<script>
import StepOne from '../views/build/StepOne.vue'
import StepTwo from '../views/build/StepTwo.vue'
import StepThree from '../views/build/StepThree.vue'

export default {
  components: {
    StepOne,
    StepTwo,
    StepThree,
  },
  data() {
    return {
      steps: ['Step 1', 'Step 2', 'Step 3'],
      currentStep: 0,
    };
  },
  computed: {
    currentComponent() {
      return ['StepOne', 'StepTwo', 'StepThree'][this.currentStep];
    },
  },
  methods: {
    nextStep() {
      if (this.currentStep < this.steps.length - 1) {
        this.currentStep++;
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
  },
};
</script>

<style>
.progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.step {
  flex: 1;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.step.completed {
  background-color: #aaf;
}
.step.active {
  background-color: #88f;
}
</style>
